<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-07-08 10:56:57
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-01-16 15:33:34
 * @FilePath: \BLOG\src\components\common\CustomPage.vue
-->
<!--
  * @Description: 分页组件
  * @props:
  * page: 分页的对象 { page:1, size:10, total:0 }
  * loading: 是否显示加载中 默认为false
  * scorllTop: 是否滚动到指定位置 Boolean 默认封面的底部 || String 指定类名 容器的 TOP
-->
<template>
  <div class="pagination-warp" v-loading="loading">
    <el-pagination
      :disabled="loading"
      :page-size="page.size"
      v-model:current-page="page.page"
      :hide-on-single-page="true"
      :pager-count="isMobi ? 5 : 9"
      background
      :layout="isMobi ? 'prev, pager, next' : isShowTotal ? 'prev, pager, next, total' : 'prev, pager, next'"
      :total="page.total"
      :prev-icon="prePageIcon"
      :next-icon="nextPageIcon"
      @change="handlePageChange" />
  </div>
</template>

<script lang="ts" setup>
import nextPageIcon from '@/components/icon/NextPageBtn.vue';
import prePageIcon from '@/components/icon/PrePageBtn.vue';
import useResize from '@/hooks/useResize';
import { ElPagination } from 'element-plus';
import { nextTick } from 'vue';

const { isMobi } = useResize();

const props = defineProps({
  page: {
    type: Object,
    default: () => ({
      page: 1,
      size: 10,
      total: 0
    })
  },
  loading: {
    type: Boolean,
    default: false
  },
  // 是否滚动到顶部 基于div 的 类名
  scorllTop: {
    type: [Boolean, String],
    default: false
  },
  isShowTotal: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(['change']);

// 指定滚动到顶部的逻辑
const handleScorllTop = () => {
  nextTick(() => {
    const layout = document.querySelector('#layout');
    if (typeof props.scorllTop === 'boolean') {
      if (isMobi.value) {
        (layout as HTMLElement).scrollTo({ top: 300, behavior: 'smooth' });
      } else {
        (layout as HTMLElement).scrollTo({ top: 400, behavior: 'smooth' });
      }
    } else {
      const className = (props.scorllTop as string).includes('.') ? props.scorllTop : `.${props.scorllTop}`;
      const topEle = document.querySelector(className);
      const top = (topEle as HTMLElement).offsetTop - 60;
      (layout as HTMLElement).scrollTo({ top, behavior: 'smooth' });
    }
  });
};

const handlePageChange = (page: number, size: number) => {
  emits('change', page, size, () => {
    if (props.scorllTop) {
      handleScorllTop();
    }
  });
};
</script>

<style lang="scss">
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;

  .el-pager {
    li {
      background-color: transparent !important;
      cursor: url('@/assets/images/cursor/pointer.png'), auto !important; // clickable cursor to assets/images/cursor/pointer.png
    }
    .number {
      border-radius: var(--border-radius-1);
      background-color: var(--bg-content-color) !important;
      border: 1px solid var(--border-color);
      color: var(--text-color) !important;
    }
    .is-active {
      color: var(--theme-color) !important;
      border-color: var(--theme-color);
      background-color: var(--bg-content-color) !important;
    }
  }
  .btn-prev,
  .btn-next {
    border-radius: var(--border-radius-1);
    background-color: transparent !important;
    cursor: url('@/assets/images/cursor/pointer.png'), auto !important; // clickable cursor to assets/images/cursor/pointer.png
    .el-icon {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
